import * as echarts from '../../utils/echarts'
import * as common from '../../utils/common'  //common为接口对象

let chart = null;
var edata = {
  yData: [],  //X轴
  sName: '',                                            //series.name
  sData: []                    //series.data
}
function initChart(canvas, width, height) {
  chart = echarts.init(canvas, null, {    // width,height : 宽高
    width: width,
    height: height
  });
  canvas.setChart(chart);
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {          // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      },
      formatter: '{b} \n {a}: {c}'
    },
    grid: {
      left: "35%",
      right: "3%"
    },
    xAxis: {
      type: 'value',
      axisTick: {    //坐标轴刻度
        show: false
      },
      axisLine: {    //坐标轴线
        lineStyle: {
          color: "#E9E9E9"
        }
      },
      axisLabel: {   //坐标轴刻度标签
        color: "#999"
      },
      splitLine: {
        lineStyle: {
          color: "#E9E9E9",
          type:"dashed"
        }
      }
    },
    yAxis: {
      type: 'category',
      name: edata.sName,
      nameLocation:'start',
      nameTextStyle: {  //坐标轴名称的文字样式
        color: "#999",
        verticalAlign: 'middle'
      },
      nameGap: 30,
      axisLine: {   //坐标轴线
        lineStyle: {
          color: "#E9E9E9"
        }
      },
      axisLabel: {   //坐标轴刻度标签
        color: "#999"
      },
      axisTick: {    //坐标轴刻度
        show: false
      },
      data: edata.yData
    },
    series: [{
      name: edata.sName,
      data: edata.sData,
      type: 'bar',
      barWidth: '30%',
      itemStyle: {
        color: {
          type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
          colorStops: [{
            offset: 0, color: '#32A4E5'  //0% 处的颜色
          }, {
            offset: 1, color: '#49C6DA'  //100% 处的颜色
          }],
          globalCoord: false     //缺省为 false
        }
      }
    }]
  };

  chart.setOption(option);
  return chart;
}

Page({
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () { },
      fail: function () { }
    }
  },
  data: {
    ec: {
      onInit: null
    },
    table: {
      title: [],
      list: [],
      sum: ''

    }
  },
  onLoad() {
    let that = this;
    this.allInit(that);
    /* this.echartInit(that);
    this.tableInit(that); */

  },
  onShow() {


  },
  onReady() {
    //this.oneComponent = this.selectComponent('#mychart-dom-bar');
    /* console.log("table", this.data.table)
    setTimeout(function () {
      // 获取 chart 实例的方式
      console.log(chart)
    }, 2000); */
  },
  allInit: function (that) {
    edata = {  //全局函数已经定义 此处作替换
      yData: ['乌鲁木齐市', '克拉玛依市', '吐鲁番市', '哈密市', '昌吉回族自治州', '博尔塔拉蒙古自治区', '巴音郭楞蒙古自治区', '伊犁哈萨克自治州'],  //Y轴
      sName: '请求量',                                            //series.name
      sData: [13, 18, 16, 8, 24, 17, 3, 8],                    //series.data    
      title: ["行政区域", "请求量"],
      list: [
        { "name": "乌鲁木齐市", "value": "13" },
        { "name": "克拉玛依市", "value": "18" },
        { "name": "吐鲁番市", "value": "16" },
        { "name": "哈密市", "value": "8" },
        { "name": "昌吉回族自治州", "value": "24" },
        { "name": "博尔塔拉蒙古自治区", "value": "17" },
        { "name": "巴音郭楞蒙古自治区", "value": "3" },
        { "name": "伊犁哈萨克自治州", "value": "8" }
      ],
      sum: ''
    }
    let list = edata.list;
    let sum = 0; //总数
    list.forEach(function (item) {
      sum += parseInt(item.value);
    })
    //console.log(sum);
    list.forEach(function (item) {
      item.percent = common.fomatFloat(item.value / sum * 100, 1);  //百分比
    })
    that.setData({
      ec: {
        onInit: initChart
      },
      table: {
        title: edata.title,
        list: list,
        sum: sum
      }
    })
  }
  
});
